<?php
    require ('api/config.php');
	
    $validWidPattern = '/^\d+$/'; 
    $fid = isset($_GET['fid']) ? $_GET['fid'] : null;  
    if (!preg_match($validWidPattern, $fid) and $fid!=NULL)  {
		echo '<script>window.location.href="./";</script>';  exit();
	}  
    
	if($fid=='0' or !$fid){
        $sql = "SELECT fid FROM gather ORDER BY fid DESC LIMIT 1";
        $fids = mysqli_query($conn,$sql);
        $fids = mysqli_fetch_array($fids);
        $fid = $fids['fid'];
    }
    $sql = "SELECT title,msg,stoptime FROM gather WHERE fid LIKE $fid;";
    $gather = mysqli_query($conn,$sql);
    $gather = mysqli_fetch_array($gather);
    if($gather){
        $msg = '截止'.$gather['stoptime'].'，提示'.$gather['msg'].'TOP图片收集管理系统';
        $title = $gather['title'];
        $title = str_ireplace("'","&apos;",$title);
    }


?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
	<meta name="Robots" content="All" />
	<meta http-equiv="windows-Target" content="_top" />
	<meta name="description" content='<?php echo $title; ?>' />
	<meta name="keywords" content="<?php echo $msg; ?>" />
	<meta http-equiv='content-language' content='zh-CN'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta itemprop="name" content="<?php echo $title; ?>">
    <meta itemprop="description" content="<?php echo $msg; ?>">
    <meta itemprop="image" content="img/jt.png">
    <link rel="stylesheet" href="style/css/index.css">
    <link rel="stylesheet" href="style/css/tc.css">
    <script src="style/vue/vue.global.js"></script>
    <script src="style/vue/axios.min.js"></script>
    <script src="style/vue/md5.min.js"></script>
    <title>TOP图片收集管理系统</title>
</head>
<body>
    <div id="app">
        <div id="top">
            <div id="title"><h1 id="titles" v-text="title"></h1></div>
            <div id="list">
                <div id="list_tb"><img src="style/image/gd.png" alt="下拉列表"></div>
                <div class="list"><ul>
                    <li id="list_li"><a href="admin/new.php" target="_blank">新建收集表</a></li>
                    <li id="list_li"><a :href="admingather" target="_blank">管理收集表</a></li>
                    <li id="list_li"><a :href="adminall" target="_blank">查看收集总图</a></li>
                    <li id="list_li"><a href="admin/list.html" target="_blank">历史收集列表</a></li>
					<?php
						if($username) echo '<li id="list_li"><a href="admin/exit.php" target="_blank">退出登录</a></li>';
					?>
                </div>
            </div>
        </div>
    
        <div id="msg">
            <div id="sum">
                <span id="time"><img src="style/image/rq.png" alt="rq"> <t v-text="stoptime"></t>截止</span>
                <span id="gosum">当前已提交<b v-text="pax"></b>份</span>
            </div>
            <div id="sum2" class="tonzhi">
                <div id="sum3">
                    <span id="tishi"><img src="style/image/ts.png" alt="rq"><b> 提交须知</b></span>
                    <span id="gosum">(由<b id="uname" v-text="uname"></b>发布)</span>
                </div>
                <p id="tzmsg" v-text="msg"></p>
            </div>
            <div id="sum2" class="xingming">
                <div id="sum3">
                    <span id="xmts"><img src="style/image/name.png" alt="rq"> <b>*</b> 真实姓名</span>
                </div>
                <span id="inputname"><input type="text" id="name" required placeholder="真实姓名" v-model="name"/></span>
            </div>
    
            <div id="sum2" class="tupian">
                <div id="sum3">
                    <span id="tpts"><img src="style/image/jt.png" alt="rq"> <b>*</b> 选择图片</span>
                </div>

                </p>
                <span id="inputfile" >
                    <input type="file" id="file" accept='image/*'  @change="fileup" />
                </span>
                <div id="tp">
                    <img :src="src" alt="tj" :style="imgsty" @click="filexz()">
                </div>
            </div>
    
            <div class="tijiao" v-if="tijiao">
                <span id="tj">
                    <input type="submit" id="go" value="提交" @click="go()"/>
                </span>
            </div>
            
            <div id="sum2" class="pax">
                <div id="sum3">
                    <span id="sumts"><img src="style/image/sum.png" alt="rq"> 统计提交</span>
                    <span id="gosum">当前已提交<b v-text="pax"></b>份 | <t id="clas" v-text="clas"></t></span>
                </div>
                <p id="tzmsg" v-text="list"></p>
            </div>
        </div>
    
        <div id="bottom">
            Opyright © 2024 TOP图片收集管理系统 All Rights Reservedby.
        </div>
    
        <div id="tc0" class="tc" v-show="tanchuang">
            <span>正在上传请稍等……</span>
            <div class="tcjdt"><div class="tcrect"></div></div><!-- 进度条 -->
        </div>
    </div>
</body>


<script>
    
    const App = {
        data() {
            return {
                title:'图片收集表',stoptime:'**月**日**:**',msg:'无',pax:'*',uname:'***',clas:'无',list:'无',
                name:'',file:'',src:'style/image/tjtp.png',imgsty:'width: 115px;',admingather:'./admin/new.php',adminall:'',
                fid:'1',axiosky:'',
                tijiao:true,tanchuang:false
            }
        }, methods: {
            get_fid:function(){
                //获取GET后面的参数
                var url = decodeURIComponent(location.search); 
                var cs = new Object();
                    if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for(var i = 0; i < strs.length; i++) {
                        cs[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                    var fid = cs.fid;
                }
                return fid;
            },
            axio:function(id){
                //请求服务器，收集表的信息
                if(id==null){var id='0';}
                //console.log(id);
                var that = this;
                axios
                    .post("../api/upadmin.php",{fun:"chaxeng",fid:id})
                    .then(function(resp) {
                        var data = resp.data;
						if(data.stat == '200'){
							document.title = data.title;
							that.title = data.title;
							that.stoptime = data.stoptime;
							that.msg = data.msg;
							that.pax = data.pax;
							that.uname = data.uname;
							that.clas = data.class;
							that.list = data.list;
							that.fid = data.fid;
							
							document.querySelector('meta[itemprop="name"]').setAttribute("content",data.title);
							
							that.admingather = './admin/admin.php?fid='+data.fid;
                            that.adminall = './admin/all.html?fid='+data.fid;
						}else if(data.stat == '400'){
                            alert(data.msg);
                            var url = './index.html';
                            window.location.href=url;
                        }else{
							alert('获取收集表时，服务器发生未知错误\n\n错误参数:'+data);
						}
						
                        if(data.stoptime=='收集表已过期'){
                            that.tijiao=false;
                            that.msg = '收集表已过期，无法再提交截图！如有特殊情况，请联系收集表的创建者。谢谢合作！';
                            that.stoptime = ' 收集表已过期 '
                            alert('抱歉，当前收集表已过期！无法再提交图片！');

                        }
                    }).catch(function(err){
                        console.log(err);
                    });
                
            }
            ,
            filexz:function(){
                document.getElementById('file').click()
            },

            fileup(e){
                //截图预览
                let _this = this;
                var files = e.target.files[0];
                this.file = e.target.files[0];
                if(this.file!=null || this.file!='' || this.file!=undefined){
                    //console.log(this.file);
                    if (!e || !window.FileReader) return  // 是否FileReader
                    let reader = new FileReader();
                    this.imgsty = '';
                    reader.readAsDataURL(files); // 文件转换
                    reader.onloadend = function () {
                        _this.src = this.result;
                        _this.textHide=false;
                    }
                }
            }
            ,
            go:function(){
                //提交图片到服务器
                if(this.name=='' || this.imgsty!=''){
                    alert("请填写姓名和图片！");
                }else{
                    this.tijiao=false;
                    this.tanchuang=true;
                    var that = this;
                    let formData = new FormData();
                    formData.append('name', this.name);
                    formData.append('fid', this.fid);
                    formData.append('file', this.file);
                    //console.log(this.file);

                    axios.post('../api/upfile.php',formData)
                        .then(function (data) {
                            //console.log(data);
                            that.tijiao=true;
                            that.tanchuang=false;
                            var stat = data.data.stat;
                            if(stat=='200'){
                                alert(data.data.msg);
                                //初始化输入框
                                that.name = '';
                                that.file = '';
                                that.imgsty='width: 115px;';
                                that.src='style/image/tjtp.png';
                                
                                var fid = that.get_fid();
                                that.axio(fid);
                            }else if(stat == '400'){
                                alert(data.data.msg);
                            }else{
                                alert('上传文件时,发生未知错误！\n\n错误参数:'+data.data);
                            }
                        })
                }
            },
            md5:function(mima){
                if(mima==null || mima==''){var mima = new Date().getTime();}
                var md5mima = '00000000000000000000000000011000011010100000';
                var md5key = '00000000000000000000101111000110000101001110';
                var md5mima=parseInt(md5mima,2);
                var md5key=parseInt(md5key,2);
                var ver = md5(parseInt(mima/md5mima)+md5key);
            }
            
        },mounted:function(){
            this.fid = this.get_fid();
            this.axio(this.fid);
			this.admingather = './admin/admin.php?fid='+this.fid;
            this.adminall = './admin/all.html?fid='+this.fid;
        },created(){
        }
    }
    Vue.createApp(App).mount('#app')

    
</script>
</html>